{extend name="base"}
{block name="title"}新用户走势图{/block}
{block name="head"}
<script src="__STATIC__/houtai/js/echarts-2.2.7.min.js"></script>
<style>
.toolbar {padding:0;}
.toolbar .l-list .menu-list {padding:0; margin:0;}
</style>
{/block}
{block name="body"}
<body class="mainbody">
<form>
  <!--导航栏-->
  <div class="location">
    <a href="javascript:history.back(-1);" class="back"><i class="iconfont icon-up"></i><span>返回上一页</span></a>
    <a href="{:url('index/home')}" class="home"><i class="iconfont icon-home"></i><span>首页</span></a>
    <i class="arrow iconfont icon-arrow-right"></i>
    <span>新用户走势图</span>
  </div>
  <!--/导航栏-->

  <!--工具栏-->
  <div id="floatHead" class="toolbar-wrap">
    <div class="toolbar">
      <div class="box-wrap">
        <a class="menu-btn"><i class="iconfont icon-more"></i></a>
        <div class="l-list">
          <div class="menu-list">
            <input type="text" class="input rule-date-input" autocomplete="off" name="time" value="{$time}" {literal}onclick="WdatePicker({maxDate:'%y-%M-%d'})"{/literal} placeholder="结束日期" />&nbsp;
            <a class="btn-search"><i class="iconfont icon-search"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/工具栏-->

  <!--列表-->
  <div class="table-container">
  <!-- box-shadow:gray 0 0 10px inset; -->
    <div id="chart1" style="width:100%; min-height:680px;"></div>
  </div>
  <!--/列表-->

  <!--内容底部-->
  <div class="page-footer"><div class="btn-wrap">{/*$page->render()*/}</div></div>
  <!--/内容底部-->

</form>
<script>
$(function(){

  var DAY_SPAN = "{$DAY_SPAN}" * 1;
  var TIME = "{$time}";
  var LIST = {:json_encode($list, JSON_UNESCAPED_UNICODE)};
  var CHANNELS = {:json_encode($CHANNELS, JSON_UNESCAPED_UNICODE)};
  
  var legend_data = [];
  var series = [];
  var xAxis_data = [];

  (function fixDataALL() {
    
    console.log(TIME);
    var tm = TIME.split('-');
    var t2 = new Date;
    t2.setFullYear(tm[0]);
    t2.setMonth(tm[1] - 1);
    t2.setDate(tm[2]);
    
    for (var i = 0; i < DAY_SPAN; i++) {
      var m = t2.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = t2.getDate();
      d = d < 10 ? "0" + d : d;
      xAxis_data.push(t2.getFullYear() + "-" + m + "-" + d);
      t2.setTime(t2.getTime() - 1 * 24 * 60 * 60 * 1000);
    }
    xAxis_data.reverse();

    $.each(CHANNELS, function (CID, Channel) {
      legend_data.push(Channel.Name);
      var arr = [];
      $.each(xAxis_data, function (c, Ymd) {
        var found = 0;
        $.each(LIST, function (e, f) {
          if (f.a == Ymd && f.b == CID) {
            found = f.c;
            return false;
          }
        });
        arr.push(found);
      });
      series.push({
        name: Channel.Name,
        type: 'line',
        data: arr
      });
    });
    
  })();
  
  console.log(CHANNELS);
  console.log(xAxis_data);
  console.log(series);
  
  var a = $('#chart1');
  var myChart = echarts.init(a[0]).setOption({
    title: {
      text: '各渠道新用户走势图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: legend_data
    },
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false, // 类目起始和结束两端空白策略, 默认为true留空，false则顶头
        data: xAxis_data
      }
    ],
    yAxis: [{
        type: 'value',
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    series: series
  });
});
</script>
</body>
{/block}